<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title></title>

    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <script th:src="@{static/js/axios.min.js}"></script>


    <style>
        .app {
            margin-top: 10px;
            margin-right: 40px;
        }
    </style>
</head>

<body style="background-image: url(static/image/background.png);background-size: 100% ;">

<div id="app" style="text-align: center;margin-top: 20%;">

    <el-input placeholder="请输入登录名"  v-model="loginName" style=" width: 20%;height: 20%;"></el-input>
    <br/>
    <el-input placeholder="请输入密码"  v-model="password" show-password style=" width: 20%;height: 20%;margin-top: 2%;"></el-input>
    <br/><br/>
    <el-checkbox v-model="rememberMe" style="position: relative;left: -6px;top: 2px">记住我</el-checkbox><br>
    <el-button type="primary" v-on:click="login()" style="position: relative;left: -9px;top: 16px;width: 110px">登录</el-button>
</div>

</body>
<script type="text/javascript" th:inline="javascript">

    let app = new Vue({
        el: "#app",
        data: {
            loginName: "bbb",
            password: "123456",
            rememberMe:false
        },
        methods: {
            login: function () {
                axios.get([[@{sys/login}]],{
                    params:{
                        loginName : this.loginName,
                        password : this.password,
                        rememberMe:this.rememberMe
                    }
                })
            .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                    console.log("res="+res);
                    console.log("res.data="+res.data);
                    //跳转到首页
                    location.href=[[@{/}]];
                })
                    .catch(error => {
                        console.log(error);
                    });


                /*if (this.loginName === '') {
                    this.utip1 = "登录名不能为空";
                }if (this.password === '') {
                    this.ptip1 = "密码不能为空";
                }if (!this.password.match("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$")) {
                    this.ptip3 = "密码必须包含至少一位数字和字母并且密码的长度不能小于6位，大于12位";
                }else{
                    window.location.href="go";
                }*/


            }
        }


    });


</script>

</html>
